import Icon from '@/components/Icon';
import styles from './index.module.scss';
import { CommentType } from '@/store/reducer/comment';
import { useDispatch } from 'react-redux';
import { saveOriginCommentsAction } from '@/store/action/comment';

type Props = {
  comment: CommentType;
};

export default function CommentItem({ comment }: Props) {
  const dispatch = useDispatch();
  if (!comment.aut_name) return <h3>这里是评论列表</h3>;
  return (
    <div className={styles.root}>
      {/* 评论者头像 */}
      <div className="avatar">
        <img src={comment.aut_photo} alt="" />
      </div>

      <div className="comment-info">
        {/* 评论者名字 */}
        <div className="comment-info-header">
          <span className="name">{comment.aut_name}</span>

          {/* 关注或点赞按钮 */}
          <span className="thumbs-up">
            {comment.like_count}
            <Icon type={comment.is_liking ? 'iconbtn_like_sel' : 'iconbtn_like2'} />
          </span>
        </div>

        {/* 评论内容 */}
        <div className="comment-content">{comment.content}</div>

        <div className="comment-footer">
          {/* 回复按钮 */}

          {/*  3. 点击回复按钮，存储数据 */}
          {/* // 7. onClick触发 */}
          <span className="replay" onClick={() => dispatch(saveOriginCommentsAction(comment))}>
            {comment.reply_count}回复 <Icon type="iconbtn_right" />
          </span>

          {/* 评论日期 */}
          <span className="comment-time">{comment.pubdate}</span>
        </div>
      </div>
    </div>
  );
}
